<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
   <title>个人中心</title>
	<link rel="stylesheet" type="text/css" href="${ctx}/resource/user/css/style.css">
	<script src="${ctx}/resource/js/jquery-1.9.1.min.js"></script>
	<script src="${ctx}/resource/user/js/jquery.luara.0.0.1.min.js"></script>
	
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  
  <style type="text/css">
  
            ul li{list-style: none;}
			.track-rcol{width: 900px; border: 1px solid #eee;}
			.track-list{margin: 20px; padding-left: 5px; position: relative;}
			.track-list li{position: relative; padding: 9px 0 0 25px; line-height: 18px; border-left: 1px solid #d9d9d9; color: #999;}
			.track-list li.first{color: red; padding-top: 0; border-left-color: #fff;}
			.track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(${ctx}/resource/img/order-icons.png)  -21px -72px no-repeat;}
			.track-list li.first .node-icon{background-position:0 -72px;}
			.track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
			.track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
			.track-list li.first .time{margin-right: 20px; }
			.track-list li.first .txt{max-width: 600px; }
			
  </style>

</head>
<body>





 <%@ include file="/common/utop.jsp" %>
 
<!--导航条-->
<div class="width100" style="height:45px;background:#dd4545;margin-top:40px;position:relative;z-index:100;">
	<!--中间的部分-->	
	<div class="width1200 center_yh relative_yh" style="height:45px;">
        <!--普通导航-->
        <div class="left_yh font16" id="pageNav">
        	<a href="${ctx}/login/uIndex">首页</a>
        </div>
    </div>
</div>

<!--当前位置-->
<div class="width1200 center_yh hidden_yh font14" style="height:40px;line-height:40px;">
	<span>当前位置:</span><a href="#" class="c_66">首页></a><a href="#" class="c_66">我的账户></a>
</div>
<div class="width100 hidden_yh" style="background:#f0f0f0;padding-top:34px;padding-bottom:34px;">
	<div class="width1200 hidden_yh center_yh">
    	<div id="vipNav">
        	<a href="${ctx}/user/view" >个人信息</a>
            <a href="${ctx}/itemOrder/my" class="on">我的订单</a>
            <a href="${ctx}/sc/findBySql">商品收藏</a>
            <a href="${ctx}/login/pass" >修改密码</a>
        </div>
        <div id="vipRight">
            <div style="width:938px;border:1px solid #ddd;background:#fff;">
            	<!--导航-->
            	<div class="width100 hidden_yh" style="height:74px;line-height:74px;background:#f5f8fa;border-bottom:1px solid #ddd;" id="navLt">
                    <span class="left_yh font24 width20 tcenter cursor onHover onorange slect">全部订单(${fn:length(all)})</span>
                    <span class="left_yh font24 width20 tcenter cursor onHover onorange">已取消(${fn:length(yqx)})</span>
                    <span class="left_yh font24 width20 tcenter cursor onHover onorange">待发货(${fn:length(dfh)})</span>
                    <span class="left_yh font24 width20 tcenter cursor onHover onorange">待收货(${fn:length(yfh)})</span>
                    <span class="left_yh font24 width20 tcenter cursor onHover onorange">已收货(${fn:length(dpj)})</span>
                </div>
                <!--全部订单-->
                <div class="allGoods width100 hidden_yh hhD" style="display:block;">
                
                   <!-- 这是一个整的   start-->
                   
                   <c:forEach items="${all}" var="data" varStatus="l">
                	<!--bottom(一条)-->
                	<div class="width100 hidden_yh">
                    <!--标题-->
                	<div class="width100 hidden_yh font20 c_66" style="background:#faf5f5;text-indent:47px;height:50px;line-height:50px;border-bottom:1px solid #ddd;">
                      <fmt:formatDate value="${data.addTime}"  type="both" />订单号${data.code} 
                      
                     <!--  0.新建代发货1.已取消 2已已发货3.到收货 -->
                     <span style="color: red">
                      <c:if test="${data.status == 0}"> 待发货</c:if>
                      <c:if test="${data.status == 1}"> 已取消</c:if>
                      <c:if test="${data.status == 2}"> 待收货</c:if>
                      <c:if test="${data.status == 3}"> 已收货</c:if>
                     </span> 
                    </div>
                    <!--之一 details -->
                    
                     <c:forEach items="${data.details}" var="chil" varStatus="l">
	                      <div style="width:838px;border-bottom:1px dashed #ddd;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh">
	                    	<img src="${ctx}/${chil.item.url1}" width="100" height="100" class="left_yh" style="padding-right: 10px">
	                        <div class="left_yh" style="width:580px;">
	                        	<h3 class="font18 c_33 font100">${chil.item.name}</h3>
	                            <p class="c_66 font16" style="margin-top:16px;">折扣：${chil.item.zk}</p>
	                            <p class="red" style="margin-top:10px;">￥${chil.item.price}</p>
	                        </div>
	                        <div class="right_yh">
	                         <c:if test="${data.status == 3}"> 
	                            <a href="${ctx}/itemOrder/pj?id=${chil.itemId}" class="onfff block_yh tcenter font16 onHoverr" style="margin-top:10px;padding:6px;">去评价</a>
	                        </c:if>
	                        
	                        <c:if test="${data.status != 0 or data.status != 1}">
	                          <a href="javascript:;" class="onfff block_yh tcenter font16 onHoverr"  onclick="show_modal('${data.id}');"  style="margin-top:10px;padding:6px;">查看物流</a> 
	                        </c:if>
	                        </div>
	                     </div>
                     </c:forEach>
                    <!--总结-->
                    <div style="width:838px;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh tleft">
                    	<font class="font24">总金额<font class="font18 c_66">(含运费0元)：</font></font><font class="red font34"><font class="font24">￥</font>${data.total}</font>
                    	
                    	  <c:if test="${data.status == 0}"> 
	                            <a href="${ctx}/itemOrder/qx?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">取消订单</a>
	                     </c:if>
	                      <c:if test="${data.status == 1}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已取消</a>
	                     </c:if>
	                      <c:if test="${data.status == 2}"> 
	                            <a href="${ctx}/itemOrder/sh?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">去收货</a>
	                     </c:if>
                         <c:if test="${data.status == 3}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已收货</a>
	                     </c:if>
                    </div>
                	</div>
                	<!-- 这是一个整的   end-->
                	</c:forEach>
                </div>
                
                
                <!--已取消-->
                <div class="waitingPay width100 hidden_yh hhD" style="display:none">
                	<!--bottom(一条)-->
                  <!-- 这是一个整的   start-->
                   
                   <c:forEach items="${yqx}" var="data" varStatus="l">
                	<!--bottom(一条)-->
                	<div class="width100 hidden_yh">
                    <!--标题-->
                	<div class="width100 hidden_yh font20 c_66" style="background:#faf5f5;text-indent:47px;height:50px;line-height:50px;border-bottom:1px solid #ddd;">
                      <fmt:formatDate value="${data.addTime}"  type="both" />订单号${data.code} 
                      
                     <!--  0.新建代发货1.已取消 2已已发货3.到收货 -->
                      <span style="color: red">
                      <c:if test="${data.status == 0}"> 待发货</c:if>
                      <c:if test="${data.status == 1}"> 已取消</c:if>
                      <c:if test="${data.status == 2}"> 待收货</c:if>
                      <c:if test="${data.status == 3}"> 已收货</c:if>
                     </span>
                    </div>
                    <!--之一 details -->
                    
                     <c:forEach items="${data.details}" var="chil" varStatus="l">
	                      <div style="width:838px;border-bottom:1px dashed #ddd;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh">
	                    	<img src="${ctx}/${chil.item.url1}" width="100" height="100" class="left_yh" style="padding-right: 10px">
	                        <div class="left_yh" style="width:580px;">
	                        	<h3 class="font18 c_33 font100">${chil.item.name}</h3>
	                            <p class="c_66 font16" style="margin-top:16px;">折扣：${chil.item.zk}</p>
	                            <p class="red" style="margin-top:10px;">￥${chil.item.price}</p>
	                        </div>
	                        <div class="right_yh">
	                         <c:if test="${data.status == 3}"> 
	                            <a href="${ctx}/itemOrder/pj?id=${chil.itemId}" class="onfff block_yh tcenter font16 onHoverr" style="margin-top:10px;padding:6px;">去评价</a>
	                        </c:if>
	                        </div>
	                     </div>
                     </c:forEach>
                    <!--总结-->
                    <div style="width:838px;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh tleft">
                    	<font class="font24">总金额<font class="font18 c_66">(含运费0元)：</font></font><font class="red font34"><font class="font24">￥</font>${data.total}</font>
                    	
                    	  <c:if test="${data.status == 0}"> 
	                            <a href="${ctx}/itemOrder/qx?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">取消订单</a>
	                     </c:if>
	                      <c:if test="${data.status == 1}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已取消</a>
	                     </c:if>
	                      <c:if test="${data.status == 2}"> 
	                            <a href="${ctx}/itemOrder/sh?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">去收货</a>
	                     </c:if>
                         <c:if test="${data.status == 3}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已收货</a>
	                     </c:if>
                    </div>
                	</div>
                	<!-- 这是一个整的   end-->
                	</c:forEach>
                </div>
                
                
                
                <!--待发货-->
                <div class="deLivery width100 hidden_yh hhD" style="display:none;">
                 
                  <c:forEach items="${dfh}" var="data" varStatus="l">
                	<!--bottom(一条)-->
                	<div class="width100 hidden_yh">
                    <!--标题-->
                	<div class="width100 hidden_yh font20 c_66" style="background:#faf5f5;text-indent:47px;height:50px;line-height:50px;border-bottom:1px solid #ddd;">
                      <fmt:formatDate value="${data.addTime}"  type="both" />订单号${data.code} 
                       <span style="color: red">
                     <!--  0.新建代发货1.已取消 2已已发货3.到收货 -->
                      <c:if test="${data.status == 0}"> 待发货</c:if>
                      <c:if test="${data.status == 1}"> 已取消</c:if>
                      <c:if test="${data.status == 2}"> 待收货</c:if>
                      <c:if test="${data.status == 3}"> 已收货</c:if>
                      </span>
                    </div>
                    <!--之一 details -->
                    
                     <c:forEach items="${data.details}" var="chil" varStatus="l">
	                      <div style="width:838px;border-bottom:1px dashed #ddd;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh">
	                    	<img src="${ctx}/${chil.item.url1}" width="100" height="100" class="left_yh" style="padding-right: 10px">
	                        <div class="left_yh" style="width:580px;">
	                        	<h3 class="font18 c_33 font100">${chil.item.name}</h3>
	                            <p class="c_66 font16" style="margin-top:16px;">折扣：${chil.item.zk}</p>
	                            <p class="red" style="margin-top:10px;">￥${chil.item.price}</p>
	                        </div>
	                        <div class="right_yh">
	                         <c:if test="${data.status == 3}"> 
	                            <a href="${ctx}/itemOrder/pj?id=${chil.itemId}" class="onfff block_yh tcenter font16 onHoverr" style="margin-top:10px;padding:6px;">去评价</a>
	                        </c:if>
	                        </div>
	                     </div>
                     </c:forEach>
                    <!--总结-->
                    <div style="width:838px;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh tleft">
                    	<font class="font24">总金额<font class="font18 c_66">(含运费0元)：</font></font><font class="red font34"><font class="font24">￥</font>${data.total}</font>
                    	
                    	  <c:if test="${data.status == 0}"> 
	                            <a href="${ctx}/itemOrder/qx?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">取消订单</a>
	                     </c:if>
	                      <c:if test="${data.status == 1}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已取消</a>
	                     </c:if>
	                      <c:if test="${data.status == 2}"> 
	                            <a href="${ctx}/itemOrder/sh?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">去收货</a>
	                     </c:if>
                         <c:if test="${data.status == 3}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已收货</a>
	                     </c:if>
                    </div>
                	</div>
                	<!-- 这是一个整的   end-->
                	</c:forEach>
                 
                </div>
                
                
                
                <!--待收货-->
                <div class="waitSh width100 hidden_yh hhD" style="display:none;">
                	 <c:forEach items="${yfh}" var="data" varStatus="l">
                	<!--bottom(一条)-->
                	<div class="width100 hidden_yh">
                    <!--标题-->
                	<div class="width100 hidden_yh font20 c_66" style="background:#faf5f5;text-indent:47px;height:50px;line-height:50px;border-bottom:1px solid #ddd;">
                      <fmt:formatDate value="${data.addTime}"  type="both" />订单号${data.code} 
                      
                     <!--  0.新建代发货1.已取消 2已已发货3.到收货 -->
                      <span style="color: red">
                      <c:if test="${data.status == 0}"> 待发货</c:if>
                      <c:if test="${data.status == 1}"> 已取消</c:if>
                      <c:if test="${data.status == 2}"> 待收货</c:if>
                      <c:if test="${data.status == 3}"> 已收货</c:if>
                      </span>
                    </div>
                    <!--之一 details -->
                    
                     <c:forEach items="${data.details}" var="chil" varStatus="l">
	                      <div style="width:838px;border-bottom:1px dashed #ddd;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh">
	                    	<img src="${ctx}/${chil.item.url1}" width="100" height="100" class="left_yh" style="padding-right: 10px">
	                        <div class="left_yh" style="width:580px;">
	                        	<h3 class="font18 c_33 font100">${chil.item.name}</h3>
	                            <p class="c_66 font16" style="margin-top:16px;">折扣：${chil.item.zk}</p>
	                            <p class="red" style="margin-top:10px;">￥${chil.item.price}</p>
	                        </div>
	                        <div class="right_yh">
	                         <c:if test="${data.status == 3}"> 
	                            <a href="${ctx}/itemOrder/pj?id=${chil.itemId}" class="onfff block_yh tcenter font16 onHoverr" style="margin-top:10px;padding:6px;">去评价</a>
	                        </c:if>
	                        </div>
	                     </div>
                     </c:forEach>
                    <!--总结-->
                    <div style="width:838px;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh tleft">
                    	<font class="font24">总金额<font class="font18 c_66">(含运费0元)：</font></font><font class="red font34"><font class="font24">￥</font>${data.total}</font>
                    	
                    	  <c:if test="${data.status == 0}"> 
	                            <a href="${ctx}/itemOrder/qx?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">取消订单</a>
	                     </c:if>
	                      <c:if test="${data.status == 1}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已取消</a>
	                     </c:if>
	                      <c:if test="${data.status == 2}"> 
	                            <a href="${ctx}/itemOrder/sh?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">去收货</a>
	                     </c:if>
                         <c:if test="${data.status == 3}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已收货</a>
	                     </c:if>
                    </div>
                	</div>
                	<!-- 这是一个整的   end-->
                	</c:forEach>
                </div>
                
                
                
                
                <!--待评价-->
                <div class="assess width100 hidden_yh hhD" style="display:none;">
                	 <c:forEach items="${dpj}" var="data" varStatus="l">
                	<!--bottom(一条)-->
                	<div class="width100 hidden_yh">
                    <!--标题-->
                	<div class="width100 hidden_yh font20 c_66" style="background:#faf5f5;text-indent:47px;height:50px;line-height:50px;border-bottom:1px solid #ddd;">
                      <fmt:formatDate value="${data.addTime}"  type="both" />订单号${data.code} 
                       <span style="color: red">
                     <!--  0.新建代发货1.已取消 2已已发货3.到收货 -->
                      <c:if test="${data.status == 0}"> 待发货</c:if>
                      <c:if test="${data.status == 1}"> 已取消</c:if>
                      <c:if test="${data.status == 2}"> 待收货</c:if>
                      <c:if test="${data.status == 3}"> 已收货</c:if>
                      </span>
                    </div>
                    <!--之一 details -->
                    
                     <c:forEach items="${data.details}" var="chil" varStatus="l">
	                      <div style="width:838px;border-bottom:1px dashed #ddd;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh">
	                    	<img src="${ctx}/${chil.item.url1}" width="100" height="100" class="left_yh" style="padding-right: 10px">
	                        <div class="left_yh" style="width:580px;">
	                        	<h3 class="font18 c_33 font100">${chil.item.name}</h3>
	                            <p class="c_66 font16" style="margin-top:16px;">折扣：${chil.item.zk}</p>
	                            <p class="red" style="margin-top:10px;">￥${chil.item.price}</p>
	                        </div>
	                        <div class="right_yh">
	                        
	                        <c:if test="${data.status == 3}"> 
	                            <a href="${ctx}/itemOrder/pj?id=${chil.itemId}" class="onfff block_yh tcenter font16 onHoverr" style="margin-top:10px;padding:6px;">去评价</a>
	                        </c:if>
	                       
	                        </div>
	                     </div>
                     </c:forEach>
                    <!--总结-->
                    <div style="width:838px;padding-top:30px;padding-bottom:30px;" class="hidden_yh center_yh tleft">
                    	<font class="font24">总金额<font class="font18 c_66">(含运费0元)：</font></font><font class="red font34"><font class="font24">￥</font>${data.total}</font>
                    	
                    	  <c:if test="${data.status == 0}"> 
	                            <a href="${ctx}/itemOrder/qx?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">取消订单</a>
	                     </c:if>
	                      <c:if test="${data.status == 1}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已取消</a>
	                     </c:if>
	                      <c:if test="${data.status == 2}"> 
	                            <a href="${ctx}/itemOrder/sh?id=${data.id}" class="c_33 onHover font20 onorange right_yh" style="margin-top:">去收货</a>
	                     </c:if>
	                      <c:if test="${data.status == 3}"> 
	                            <a href="#" class="c_33 onHover font20 onorange right_yh" style="margin-top:">已收货</a>
	                     </c:if>
	                    <%--   --%>
                    </div>
                	</div>
                	<!-- 这是一个整的   end-->
                	</c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
 <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">物流详情</h4>
      </div>
      <div class="track-rcol">
			<div class="track-list">
				 <ul id="myss">
				</ul>
			</div>
		</div>
		
		<div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
      </div>
    </div>
    
      
  </div>
</div>


<script>
	$(".mG").click(function(){
		$(this).parent().parent().remove()
		})
	$("#navLt span").click(function(){
		var t=$(this).index();
		$(this).addClass("slect").siblings().removeClass("slect")
		$(".hhD").eq(t).css({display:"block"}).siblings(".hhD").css({display:"none"});
		})	
	
	function show_modal(id) {
		var html = "";
		 $("#myss li").remove();
		 //查询物流信息
		  $.ajax({  
	                    type : "POST",  //提交方式  
	                    url : "${ctx}/itemOrder/wl",//路径  
	                    data : {  
	                        "id" : id  
	                    },//数据，这里使用的是Json格式进行传输  
	                    success : function(result) {//返回数据根据结果进行相应的处理  
	                    	var re = JSON.parse(result);
	                    	var data = re.data.data;
	                    	
	                    	 for ( var i = 0; i <data.length; i++){
	                    		    console.log(data[i]);
	                    		   if (i == 0){
	                    			   html += "<li class='first'><i class='node-icon'></i><span class='time'>"+data[i].ftime+"</span><span class='txt'>"+data[i].context+"</span>	</li>"
	                    		   }else{
	                    			   html += "<li><i class='node-icon'></i><span class='time'>"+data[i].ftime+"</span><span class='txt'>"+data[i].context+"</span>	</li>"
	                    		   }
	                    		    
	                    		}
	                    	 $("#myss").append(html);
	                    }  
	         }); 
         $('#myModal').modal('show');
    }
</script>
</body>
</html>